<template>
  <laker-dialog
    v-model="visible"
    title="作业风险提示"
    width="900"
    height="900"
    :show-fullscreen="true"
    :show-close="true"
    destroy-on-close
    @closed="$emit('closed')"
    @setFullscreen="setFullscreen"
  >
    <div :class="elmain">
      <div class="elheader">
        <div class="elheader_title">
          <div>今日安全风险提示</div>
          <div class="elheader_time">{{ today }}</div>
        </div>
        <div class="elheader_title">今日公司重大级风险共计{{ risk01 }}个</div>
        <div class="elheader_title">
          <div>应急电话:</div>
          <div class="elheader_tel">
            <div>0476-6189666</div>
            <div>0476-6189777</div>
          </div>
        </div>
      </div>
      <div class="elbody">
        <div class="elbody_left">
          <div class="fxmc">
            <span>作业任务名称：</span><br />
            {{ dataModel.ttkName }}
          </div>
          <div :class="dataModel.fxdj">
            <span>风险等级：</span>{{ formatDict('fxdj', dataModel.fxdj) }}<br />
            <span>管控级别：</span>{{ formatDict('gkdj', dataModel.gkdj) }}
          </div>
          <div>
            <span>作业区域：</span><br />
            {{ dataModel.zyqy }}
          </div>
          <div>
            <div><span>危害因素：</span></div>
            <div class="whys">
              <div v-for="(item, index) in dataModel.whys" :class="item.fxdj" :key="index">{{ item.name }}</div>
            </div>
          </div>
          <div class="fxfzr">
            <div><span>作业负责人：</span>{{ dataModel.fxfzr }}</div>
            <div><span>作业组人数：</span>{{ dataModel.fxrs }}人</div>
          </div>
        </div>
        <div class="elbody_main">
          <div><span>防范措施：</span><br />{{ dataModel.ffcs }}</div>
        </div>
      </div>
    </div>
  </laker-dialog>
</template>

<script>
import LakerDialog from '@/components/lakerDialog/index.vue'
import { dayjs } from 'element-plus'
import dprevent from '@/api/dprevent'

export default {
  name: 'RiskAnalysisPage',
  components: { LakerDialog },
  emits: ['success', 'closed'],
  data() {
    return {
      mode: 'add',
      visible: false,
      titleMap: {
        add: '选择设备类型',
        edit: '编辑人员',
        show: '查看'
      },
      elmain: 'elmain',
      today: dayjs().format('YYYY-MM-DD'),
      risk01: 0,
      dictData: {
        fxdj: [
          { value: 'VH', label: '重大风险' },
          { value: 'H', label: '较大风险' },
          { value: 'N', label: '一般风险' },
          { value: 'L', label: '低风险' }
        ],
        gkdj: [
          { value: 'C', label: '公司级' },
          { value: 'D', label: '部门级' },
          { value: 'G', label: '班组级' },
          { value: 'P', label: '岗位级' }
        ]
      },
      dataModel: {}
    }
  },
  mounted() {
    this.getApiData()
    setInterval(() => {
      this.getApiData()
    }, 5000)
  },
  methods: {
    getApiData() {
      dprevent.getRiskAnalysisPage().then((res) => {
        if (res.code === 'success') {
          if (res.result) {
            this.dataModel = res.result[0]
            console.log(this.dataModel)
          }
        }
      })
    },
    formatDict(column, cellValue) {
      const dictList = this.dictData[column]
      let label = cellValue
      if (dictList) {
        dictList.forEach((element) => {
          if (element.value === cellValue) {
            label = element.label
          }
        })
      }
      return label
    },
    //显示
    open(mode = 'add') {
      this.mode = mode
      this.visible = true
      return this
    },
    close() {
      this.visible = false
      return this
    },
    //表单注入数据
    setData(data) {
      console.log(data)
    },
    setFullscreen(isFullscreen) {
      if (isFullscreen) {
        this.elmain = 'elmainmax'
      } else {
        this.elmain = 'elmain'
      }
    }
  }
}
</script>

<style scoped lang="scss">
span {
  font-weight: bold;
  color: red;
}
.elmain {
  height: 500px;
  background-image: url('@/assets/dprevent/spicppt.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  color: black;
  .elheader {
    margin-left: 10px;
    margin-right: 120px;
    height: 90px;
    display: flex;
    justify-items: center;
    align-items: center;
  }
  .elbody {
    margin: 5px;
    height: 380px;
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    border: 1px solid silver;
  }
}
.elmainmax {
  height: calc(100vh - 100px);
  background-image: url('@/assets/dprevent/spicppt.png');
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  .elheader {
    margin-left: 10px;
    margin-right: 250px;
    height: 120px;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    align-items: center;
  }
  .elbody {
    margin: 10px;
    height: calc(100% - 150px);
    display: flex;
    flex-direction: row;
    justify-items: center;
    align-items: center;
    border: 1px solid silver;
  }
}

.elheader_title {
  display: flex;
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 20px;
  font-weight: bold;
}

.elheader_time {
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  color: rgb(112, 48, 160);
  font-size: 16px;
  font-weight: bold;
}

.elheader_tel {
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  color: red;
  font-size: 12px;
  font-weight: bold;
}

.elbody_left {
  width: 35%;
  height: 100%;
  margin: 5px;
  div {
    margin: 2px;
    border-bottom: 1px solid silver;
  }
}
.elbody_main {
  width: 64%;
  height: 95%;
  border-left: 1px solid silver;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 5px;
}

.fxfzr {
  display: flex;
  justify-content: space-between;
  div {
    border: none;
  }
}

.whys {
  display: flex;
  flex-wrap: wrap;
  div {
    width: 30%;
    border: 1px solid silver;
    text-align: center;
  }
  border: none;
}
.VH {
  background-color: #ff0000;
  color: black;
}

.H {
  background-color: #ff7d00;
  color: black;
}

.N {
  background-color: #ffff00;
  color: black;
}

.L {
  background-color: skyblue;
  color: white;
}

.videodiv {
  width: 120px;
  height: 90px;
  border: 1px solid silver;
}
</style>
